/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  ListView,
  ScrollView,
  TouchableOpacity,
  Alert,
  AsyncStorage,
  NativeAppEventEmitter
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

var Header = require("./Component/Header");
var ListItem = require("./Component/ListItem");

var _navigator;
var listdata = [];

class TabSetting extends Component {
	constructor(props) {  
		super(props);
		
		_navigator = this.props.navigator;
		
		var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      	this.state = {
        	dataSource: ds,
      	};
  	}
	
	_ListClick(i){
//		Alert.alert(i.toString());
		switch(i){
			
			case 0: _navigator.push({id:"FixPassword"});break;
			case 1: _navigator.push({id:"CollectArticle"});break;
			case 2: _navigator.push({id:"FeedBack"});break;
			case 3:
				_navigator.resetTo({id:"Login"});
				AsyncStorage.removeItem('user_id');
				break;
			//case 2: _navigator.push({id:"About"});break;
			default:Alert.alert("暂未开通");
			
		}
	}
	
	componentWillUnmount(){
		NativeAppEventEmitter
			.removeListener('updateDevice',this.updateDevice);
			
      	listdata = [];
	}
				
	componentDidMount() {
		//ble相关监听函数
		this.updateDevice = this.updateDevice.bind(this);
        NativeAppEventEmitter
			.addListener('updateDevice',this.updateDevice);
    }
	
	updateDevice(results){
		console.log("Query completed");
						
		console.log(results);
		var len = results.rows.length;
		console.log(len);
		for (let i = 0; i < len; i++) {
			let row = results.rows.item(i);
			var obj = {name:row.name,id:row.mac};
			console.log(obj);
			listdata.push(obj);
		}
		this.setState({dataSource: this.state.dataSource.cloneWithRows(listdata)});	
	}
	
	render() {
		let item=['修改密码','我的收藏','意见反馈','退出登录'];
		let icon=["FixPwd","Collection","Suggestion","close"];
		 
	    return (
		    <View style={styles.container}>
		    	<Header name="我的"/>
		      	<ScrollView>
				      	<View style={styles.personInfo}>
				      		<TouchableOpacity style={styles.personInfo}>
				      			<Image source={require('./image/myinfo/person.png')} style={styles.header}/>
				      			<Text style={{color:"#000000"}}>用户</Text>
				      			<View style={{flexDirection:'row',alignItems: 'center',}}>
					      			<Text style={{color:"#888888",fontSize:12}}>个人中心  </Text>
					      			<Icon name="chevron-right" size={12} color="#888888" />
				      			</View>
			      			</TouchableOpacity>
				      	</View>
					    <View style={styles.mydevice}>
			      			<Text style={{color:"#888888",fontSize:12}}>我的设备</Text>
			      		</View>
			      		<View style={styles.devices}>
			      			<ListView
			      				horizontal={true}
					          	dataSource={this.state.dataSource}
					          	enableEmptySections = {true}
					          	renderRow={(rowData) => <Image style={styles.logo} source={require('./image/devices/bra.png')} />}
					        />
					    </View>
					    <View style={styles.mydevice}>
			      			<Text style={{color:"#888888",fontSize:12}}>更多</Text>
			      		</View>
			      		<View style={[styles.list]}>
			      			<ListItem 
			      				enableEmptySections = {true}
			      				callBackFunc={(i)=>{this._ListClick(i)}}
			      				name={item}
			      				icon={icon}/>
			      		</View>
		      	</ScrollView>
		    </View>
	    );
	}
}

const styles = StyleSheet.create({
	bgImage:{
		width:Dimensions.get('window').width,
		height:Dimensions.get('window').height
	},
	header:{
		width:100,
		height:100,
		borderRadius:50
	},
	container: {
	    flex: 1,
	    backgroundColor: '#FAF4FF',
	},
	personInfo:{
		height:200,
    	justifyContent: 'center',
    	alignItems: 'center',
	},
	mydevice:{
		borderBottomWidth:2,
		borderBottomColor:"#888888",
		width:Dimensions.get('window').width - 20,
		marginLeft:10,
		height:30
		
	},
	devices:{
		width:Dimensions.get('window').width - 20,
		marginLeft:10,
		marginTop:20,
	},
	logo:{
		marginLeft:10,
		width:70,
		height:70,
		marginBottom:20,
	},
	list:{
		marginBottom:30,
	}
});

module.exports = TabSetting;
